<template>
  <div id="user">
    <Header goback="true" headerTitle="我的"></Header>
    <div class="user-content paddingTop">
      <div class="user-info">
        <router-link to="/user/info" class="user-info-to">
          <div class="user-img">
            <img src="../../../static/images/fenxiang.png" alt="" />
          </div>
          <div class="user-tel">
            <p>1254855252</p>
            <p><span class="iconfont icon-shouji"></span>暂无绑定手机号</p>
          </div>
          <span class="iconfont icon-xiangyou1 right-icon"></span>
        </router-link>
      </div>
      <div class="user-balance">
        <router-link class="user-money" to="/balance">
          <p><span class="moneynum">0.00</span>元</p>
          <p>我的余额</p>
        </router-link>
        <router-link class="user-money" to="/benefit">
          <p><span class="youhuinum">3</span>元</p>
          <p>我的优惠</p>
        </router-link>
        <router-link class="user-money" to="/points">
          <p><span class="integralnum">0</span>元</p>
          <p>我的积分</p>
        </router-link>
      </div>
      <div class="user-service">
        <div>
          <router-link to="msite" class="service-item">
            <span
              class="iconfont icon-shouji icon-right-all"
              style="color: #666666; font-size: 1.2rem"
            ></span>
            <span class="service-name">我的订单</span>
            <span class="iconfont icon-xiangyou1 service-right-icon"></span>
          </router-link>
        </div>
        <div>
          <router-link to="msite" class="service-item">
            <span
              class="iconfont icon-shouji icon-right-all"
              style="color: #fc7b53; font-size: 1.2rem"
            ></span>
            <span class="service-name">积分商城</span>
            <span class="iconfont icon-xiangyou1 service-right-icon"></span>
          </router-link>
        </div>
        <div>
          <router-link to="msite" class="service-item">
            <span
              class="iconfont icon-shouji icon-right-all"
              style="color: #ffc636; font-size: 1.2rem"
            ></span>
            <span class="service-name">饿了么会员卡</span>
            <span class="iconfont icon-xiangyou1 service-right-icon"></span>
          </router-link>
        </div>

        <!-- <router-link to="msite" class="service-item">
          <span class="iconfont icon-shouji"></span>
          <span class="service-name">我的订单</span>
          <span class="iconfont icon-xiangyou1 service-right-icon"></span>
        </router-link>
        <router-link to="msite" class="service-item">
          <span class="iconfont icon-shouji"></span>
          <span class="service-name">我的订单</span>
          <span class="iconfont icon-xiangyou1 service-right-icon"></span>
        </router-link> -->
      </div>
      <div class="user-service">
        <div>
          <router-link to="msite" class="service-item">
            <span
              class="iconfont icon-shouji icon-right-all"
              style="color: #666666; font-size: 1.2rem"
            ></span>
            <span class="service-name">服务中心</span>
            <span class="iconfont icon-xiangyou1 service-right-icon"></span>
          </router-link>
        </div>
        <div>
          <router-link to="msite" class="service-item">
            <span
              class="iconfont icon-shouji icon-right-all"
              style="color: #fc7b53; font-size: 1.2rem"
            ></span>
            <span class="service-name">下载饿了么APP</span>
            <span class="iconfont icon-xiangyou1 service-right-icon"></span>
          </router-link>
        </div>
      </div>
    </div>

    <footer-guide></footer-guide>
    <transition name="router-slid" mode="out-in">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
import Header from "../../components/header/header";
import footerGuide from "../../components/footer/footGuide";
import { getService } from "../../service/getData";
export default {
  data() {
    return {
      serviceList: "",
    };
  },
  components: { Header, footerGuide },
  mounted() {
    this.inits();
  },
  methods: {
    async inits() {
      // this.serviceList = await getService();
      // console.log(this.serviceList);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../style/mixin";
.user {
  @include wh(100%, 100%);
}
.user-content {
  // margin-top: 1.94rem;
  width: 100%;
}
.user-info {
  width: 100%;
  .user-info-to {
    @include wh(100%, 4.2rem);
    background: $blue;
    position: relative;
    display: flex;
    align-items: center;
    @include sc(0.6rem, white);
  }
  .user-img {
    margin-left: 0.7rem;
    img {
      @include wh(2.7rem, 2.7rem);
    }
  }
  .user-tel {
    margin-left: 0.3rem;
    p:first-child {
      @include sc(0.8rem, white);
      font-weight: 600;
      padding-left: 0.3rem;
    }
    p {
      span {
        @include sc(1.2rem, white);
      }
      color: white;
    }
  }
  .right-icon {
    position: absolute;
    color: white;
    right: 0.7rem;
    @include ct;
  }
}

.user-balance {
  display: flex;
  @include wh(100%, 4rem);
  background: white;
  .user-money {
    flex: 0 1 33.33%;
    @include wh(100%, 100%);
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    border-right: 0.001rem solid #f1f1f1;
    p {
      @include sc(0.65rem, #666666);
      text-align: center;
      span {
        font-size: 1.25rem;
        font-weight: 600;
      }
      .moneynum {
        color: #ff9900;
      }
      .youhuinum {
        color: #ff5f3e;
      }
      .integralnum {
        color: #6ac20b;
      }
    }
  }
}
.user-service {
  margin-top: 0.4rem;
  width: 100%;

  .service-item {
    display: block;
    position: relative;
    background: white;
    @include wh(100%, 2.2rem);
    line-height: 2.2rem;
    padding-left: 1.65rem;
    span {
      @include sc(0.65rem, black);
      // padding-left: 1rem;
      // position: absolute;
      // @include ct;
      // left: 1.8rem;
      vertical-align: top;
      // padding-left: 1.3rem;
    }
    .icon-right-all {
      position: absolute;
      font-size: 1.2rem;
      @include ct;
      left: 0.35rem;
      padding-left: 0;
    }
    span:first-child() {
      @include sc(1.5rem, black);
    }
    span:nth-child(3) {
      position: absolute;
      @include ct;
      right: 0.4rem;
      @include sc(0.7rem, #bbbbbb);
      padding-left: 0;
    }
    &:after {
      display: block;
      content: "";
      width: 100%;
      height: 0.05rem;
      position: absolute;
      bottom: 0;
      right: -1.7rem;
      background: #f1f1f1;
    }
  }
}

.router-slid-enter-active,
.router-slid-leave-active {
  transition: all 0.4s;
}
.router-slid-enter,
.router-slid-leave-active {
  transform: translate3d(2rem, 0, 0);
  opacity: 0;
}
</style>
